<template>
  <div class="part flex">
    <div class="tags pl-4">
      <a-card>
        <a-statistic :title="t['已选择的标签']" :value="selectedKeys.length" animation>
        </a-statistic>
      </a-card>
    </div>
    <div class="px-3 flex items-center">
      <icon-double-right />
    </div>
    <a-card class="flex-1 stores">
      <template #title>
        <div class="flex justify-between">
          <span class="text-[12px]">【{{ t["门店列表"] }} {{ storeList.length }}】 </span>
          <div class="flex justify-between">
            <a-button type="primary" :disabled="!storeId || selectKeys.length > 0" @click="finished"
              >{{ t["完成"] }}
            </a-button>
          </div>
        </div>
      </template>
      <div class="flex justify-center">
        <StoreSelector mode="list" v-model="storeId" />
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { transportPart } from "@/api/service/priceTag/priceTag";
import { fetchStoreOptions } from "@/api/service/store/store";

import { SelectOptionData } from "@arco-design/web-vue";

import { selectedKeys, tableData } from "../data/form";

const selectKeys = ref<string[]>([]);
const t = translate("公共模块");
const storeList = ref<SelectOptionData[]>([]);
const storeId = ref();
const getStores = async () => {
  const { data } = await fetchStoreOptions();
  // storeList.value = data;
  storeList.value = data;
};

const finished = async () => {
  await transportPart(storeId.value, selectedKeys.value);
};
onMounted(() => {
  getStores();
});
const selectedList = computed(() => {
  return selectedKeys.value.map((e) => {
    tableData.value.forEach((v) => {
      if (v.tagId === e) {
        e = v.tagCode;
      }
    });
    return e;
  });
});
</script>

<style lang="scss" scoped>
.part {
  height: 100%;
  font-size: 12px;
}
.tags {
  width: 280px;
  background: var(--color-bg-3);
  ul {
    display: grid;
    overflow-y: auto;
    grid-template-columns: 1fr 1fr;
    padding: 8px;
    background: var(--color-bg-3);
    gap: 8px;
    li {
      color: #666;
      height: 42px;
      padding: 0 8px;
      background: var(--color-bg-3);
      border-radius: 4px;
      font-size: 12px;
      color: var(--color-text-1);
    }
  }
}
</style>
